<template>
    <!-- html -->
    <p> <button @click="isShow = true">打开弹窗</button></p>
    <!-- 将teleport内部的html内容移动到body中 ，teleport：传送 -->
    <teleport to="body">
        <div class="Modla" v-show="isShow">
            <h2>我是弹窗的标题</h2>
            <h4>我是弹窗的内容</h4>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </teleport>
</template>
<script lang="ts" setup name="Modla">
import { ref } from 'vue';

//Teleport：传送，Teleport是一种能够将我们的组件html结构移动到指定位置的技术
const isShow = ref(false)
</script>

<style scoped>
/* 样式 */
.Modla {
    background-color: orange;
    border-radius: 10px;
    padding: 20px;
    width: 200px;
    height: 200px;
    text-align: center;
    z-index: 1;
    position: fixed;
    left: 50%;
    margin-left: -100px;
}
</style>